<template>
  <div>
    <el-row class="tac">
      <el-col :span="6">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
        >
          <el-submenu v-for="(item, i) in lst" :key="i" :index="item.id">
            <template slot="title">
              <span>{{ item.mname }}</span>
            </template>
            <el-menu-item-group v-for="(x,t) in item.lst1" :key="t">
              <el-menu-item @click="zhuan(x.mpath)" :index="item.id+'-'+x.id">{{x.mname}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ZhuView",
  data() {
    return {
      lst: [],
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.Menu();
  },

  beforeDestroy() {},

  methods: {
    Menu() {
      this.$axios.get("/menus/api/v2/menu/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst = resp.data.data;
        }
      });
    },
    handleOpen(key) {
        console.log(key)
    },
    zhuan(mpath){
        this.$router.push(mpath)
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
</style>
